---
title: Elasticsearch Site Search UI Components
keywords: Vue, React, Angular, Instantsearch, Elasticsearch, Searchkit, Search UI Components, Search UI, Searchkit UI, Searchkit UI Components, Searchkit Components, Searchkit Instantsearch, Searchkit Instantsearch Components, Searchkit Instantsearch UI, Searchkit Instantsearch UI Compo
---

import { IntroButtons } from '../components/promo-page/IntroButtons';
import { FeatureBreakout } from '../components/promo-page/FeatureBreakout'

<div className="max-w-5xl mx-auto px-8 pb-16">


<div className="pt-4 m-auto text-left mb-6">
  <h1 className="font-extrabold md:text-5xl mt-8 mb-4 text-2xl leading-loose max-w-lg">Elasticsearch Search UI Components</h1>
  <div className="mb-4 max-w-lg">
    <p className="text-xl mb-1 text-gray-400 md:!text-xl">
      <span className=" text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-200">Searchkit</span> is an open source library which helps you build a great search experience with <span className=" text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-200">Elasticsearch.</span>
    </p>
  </div>
  <div className="max-w-lg mb-4">
    <p className="text-xl mb-1 text-gray-400 md:!text-xl">
      Works with React, Vue, Angular, and more.
    </p>
  </div>

  <IntroButtons />

</div>

```tsx
import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, RangeInput } from 'react-instantsearch';

const sk = new Searchkit({
  connection: {
    host: 'http://localhost:9200',
    // cloud_id: "elastic-cloud-id",
    auth: {
      username: "elastic",
      password: "changeme"
    }
  },
  search_settings: {
    search_attributes: [{ field: 'title', weight: 3 }, 'actors', 'plot'],
    result_attributes: ['title', 'actors', 'poster', 'plot'],
    highlight_attributes: ['title'],
    facet_attributes: [
      { attribute: 'actors', field: 'actors.keyword', type: 'string' },
      { attribute: 'imdbrating', type: 'numeric', field: 'imdbrating' }
    ]
  }
})

const searchClient = Client(sk);

export default function Web() {
    return (
      <InstantSearch
        indexName="imdb_movies"
        searchClient={searchClient}
      >
        <SearchBox />
        <div className="left-panel">
          <RefinementList attribute="actors" searchable={true} limit={10} />
          <RangeInput attribute="imdbrating" />
        </div>
        <div className="right-panel">
          <Hits />
          <Pagination />
        </div>
      </InstantSearch>
    );
}

```

<FeatureBreakout 
  title="Build Search Experiences Fast!" 
  description="Searchkit uses instantsearch, which means you can use the instantsearch libraries to build your search experience." 
  snippets={[
    {
      title: "Polyfill for Algolia",
      description: "Use Instantsearch Frontend Libraries with Elasticsearch. Components for React, Vue, Angular and Javascript.",
      link: "/docs/getting-started/with-react"
    },
    {
      title: "Semantic Search Support",
      description: "Use NLP to build a semantic search experience with Elasticsearch.",
      link: "/docs/tutorials/semantic-search"
    },
    {
      title: "Autocomplete.js Compatible",
      description: "Build an autocomplete experience with Autocomplete.js, which is compatible with Searchkit.",
      link: "/docs/components/autocomplete"
    },
    {
      title: "Geo Search Components",
      description: "Build a geo search experience with Google Maps.",
      link: "/docs/components/geo-search/geo-search"
    }
  ]}
/>
<FeatureBreakout 
  title="Full Power of Elasticsearch" 
  description="Searchkit is built on top of Elasticsearch, which means you can use the Elasticsearch query language to build your search experience." 
  snippets={[
    {
      title: "Request Hooks",
      description: "Customize the query before and after it is sent to Elasticsearch. Allows you to add custom filters, or change the query DSL easily.",
      link: "/docs/guides/customising-query#query-hooks"
    },
    {
      title: "Customise Query",
      description: "Allows you to build your own scoring query using the Elasticsearch query language.",
      link: "/docs/guides/customising-query"
    },
    {
      title: "Nested Field Support",
      description: "Support for nested fields, for data models that require joins.",
      link: "/docs/guides/facets/string-based-facets#nested-fields-support"
    },
    {
      title: "Custom Facet Aggregations",
      description: "Build your own Facets using Elasticsearch aggregations.",
      link: "https://github.com/searchkit/searchkit/issues/1174"
    }
  ]}
/>


<FeatureBreakout title="Query rules make relevance simple" description="Query rules allows you to customize the behavior of the search experience. You can use query rules to boost or filter results, or to change the ranking of results, based on a set of conditions." linkTitle="Query Rules Docs" linkHref="/docs//query-rules" image="/public/query-rules.png"
  snippets={[
    {
      title: "Boosting or exclude results",
      description: "Trigger a boost or exclude results based on a set of query, filter or context conditions.",
      link: "/docs//query-rules/actions/query-boost"
    },
    {
      title: "Pin or bury results",
      description: "Pin results to the top of the search results when they match a query.",
      link: "/docs//query-rules/actions/pin-result"
    },
    {
      title: "Show, order and hide facets",
      description: "Hide or show or order facets depending on what they are searching for or which filters they are applying.",
      link: "/docs//query-rules/actions/facet-order"
    }

  ]} />

  <h2 className="text-3xl font-bold text-gray-100 mb-6 text-center mt-4">5 minute Video Tutorial</h2>
  <iframe width="100%" height="500px" src="https://www.youtube.com/embed/R6iYpEuCdVs?autoplay=1&mute=1" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

</div>

<div className="max-w-2xl m-auto mb-2">
  <h2 className="text-xl font-bold text-gray-100 mb-3 mt-4">Do I need to expose Elasticsearch to the public internet?</h2>
  <p className="text-gray-300 text-lg   mb-6">No you don't. You can use Searchkit API to proxy requests to Elasticsearch. The XHR requests will provide the search state to the Searchkit Node API, which will then transform the request into elasticsearch queries and perform them to Elasticsearch.</p>
  <p className="text-gray-300 text-lg   mb-6">Searchkit offers both options, either perform the search directly from the browser, or use the Searchkit API to proxy requests to Elasticsearch. Directly from the browser offers great developer experience & prototyping. Once you are ready to deploy, you can use the Searchkit API to proxy requests to Elasticsearch.</p>
</div>

<div className="max-w-2xl m-auto mb-2">
  <h2 className="text-xl font-bold text-gray-100 mb-3 mt-4">Do I need to use React?</h2>
  <p className="text-gray-300 text-lg   mb-6">You can use React, React Native, Vue, Angular. You dont even need to use a frontend framework, you can use plain Javascript and HTML with instantsearch.js widgets.</p>
</div>

<div className="max-w-2xl m-auto mb-2">
  <h2 className="text-xl font-bold text-gray-100 mb-3 mt-4">Which version of Elasticsearch is supported?</h2>
  <p className="text-gray-300 text-lg   mb-6">Searchkit is compatible with Elasticsearch 7.0 and above + Opensearch 2.0 and above.</p>
</div>

<div className="max-w-2xl m-auto mb-2">
  <h2 className="text-xl font-bold text-gray-100 mb-3 mt-4">Do you support Android and iOS?</h2>
  <p className="text-gray-300 text-lg   mb-6">Potentially. Searchkit API mimics the Algolia API, so it should be possible to use the Algolia Instantsearch client with Searchkit API with a few tweaks. If you are interested in this, please let us know.</p>
</div>

<div className="max-w-2xl m-auto pd-6">
  <h2 className="text-xl font-bold text-gray-100 mb-3 mt-4">Why would I use Searchkit instead of Algolia?</h2>
  <p className="text-gray-300 text-lg  mb-6">Elasticsearch has alot of advantages over Algolia. You might want to use Elasticsearch as a cheaper alternative to Algolia, especially if you have a large dataset. You might want to run Elasticsearch on your own infrastructure, or have greater control over the query relevance.</p>
</div>


